<template>
  <div class="body">
      <van-nav-bar title="发表评论" left-arrow  @click-left="onBack" />
      <div class="page_body">
        <div class="page_division"></div>
        <!-- 评分 -->
        <div class="content_border">
          <div class="content_grade">
            <div style="margin-right: 2.53rem;">评分</div>
            <van-rate  v-model="value" void-color="#757575" gutter="0.78rem" size="1rem" color="#FFC900"/>
            <div class="content_click_text">点击来评分</div>
          </div>
      

          <textarea class="textarea_border" maxlength="500" v-model="textareaInput" placeholder=""></textarea>

          <div class="textarea_hint">还可以发布<span style="color: #01A862;">{{500-textareaInput.length}}</span>个字</div>
       
          <!-- 上传图片 -->
          <div class="upload_title"><span class="upload_title_once">评论图片</span>最多上传5张</div>
          <div class="upload_content_border">
            <van-uploader v-model="fileList" :multiple="true" :max-count="5" :after-read="onUploadImg"  @delete="onPhotoDelete">
              <div class="upload_once">
                <img class="upload_once_icon" :src="require('../../../static/icon/add_img.png')" >
              </div>
            </van-uploader>
          </div>

 

          <div class="submitButton" @click="onSubmit">发表</div>

        </div>
      </div>
 

  </div>
</template>

<script>
  import Util from '@/util/common';
  import {Toast} from 'vant';
  export default {
    name:'common',
    data() {
      return {
        domainUrl:this.$conf.domain,
        token : this.$store.state.login.token,
        options:'',

        value: 3,
        textareaInput:'',
        fileList:[],
 
        showPopup:false,
        agreement:'',
        imageList:[],
      }
    },
    watch:{

    },
    created() {
      var that = this;
      this.options = this.$route.query
      //获取当前页面信息
      // if(this.$store.state.index.currentPage.page!=window.location.href){
        this.$store.state.index.currentPage.name = '橡果互动发布评论页'
        this.$store.state.index.currentPage.page = window.location.href
        this.$store.state.index.currentPage.image = '';

      // }
      that.$wx.wxConfig()
      this.initData()
    },
    mounted(){
        var that = this;
        // this.onOffsetDiv();
        this.data = this.originData;
        setTimeout(function() {
          that.$store.state.index.currentPage.name = '橡果互动发布评论页'
          that.$store.state.index.currentPage.page = window.location.href
          that.$store.state.index.currentPage.image = '';
          that.$wx.wxConfig()
        }, 1000);
    },
    methods: {
      //数据

      //上传
      onUploadImg(e){
        var that = this;
        var formData = new FormData();

        if(Array.isArray(e)){
          e.map((item,index) => {
            formData.append('Filedata', e[index].file);
            that.$fly.post(`${that.domainUrl}/system/upload/file?pic_type=999999999`,formData).then(res => {
            var srcType = res.data.substring(0,7)
              if(srcType=='upload/'){
                this.imageList.push(res.data)
              }else{
                that.$toast('上传失败')
                that.fileList.splice(index,1);
                // that.fileList.pop()
              }
            }).catch(err => {
              that.$toast('上传失败')
              that.fileList.splice(index,1);
            })
          })
        }else{
          formData.append('Filedata', e.file);
          that.$fly.post(`${that.domainUrl}/system/upload/file?pic_type=999999999`,formData).then(res => {
          var srcType = res.data.substring(0,7)
            if(srcType=='upload/'){
              this.imageList.push(res.data)
            }else{
              that.$toast('上传失败')
              that.fileList.pop()
            }
          }).catch(err => {
            that.$toast('上传失败')
            that.fileList.pop()
          })
        }

      },
      //删除图片
      onPhotoDelete(e,item){
        this.imageList.splice(item.index, 1)
      },
      //提交
      onSubmit(){
        var that = this;
        var data = {
         to_id:this.options.id,
         module:this.options.module,
         pic1:this.imageList[0]==undefined?'':this.imageList[0],
         pic2:this.imageList[1]==undefined?'':this.imageList[1],
         pic3:this.imageList[2]==undefined?'':this.imageList[2],
         pic4:this.imageList[3]==undefined?'':this.imageList[3],
         pic5:this.imageList[4]==undefined?'':this.imageList[4],
         mess:this.textareaInput,
         point:this.value,
        detail_id: this.options.detail_id,
        order_id: this.options.order_id,
        }
        if(this.token!=1){
          this.$toast('请先登录');
        }else{
          this.$dopost('/sysapi/comment/send/',data,function (res) {
            console.log('评论',res)
            if(res.data && typeof(res.data.error) != "undefined" && res.data.error===0){
              this.$toast('发表成功');
              setTimeout(function() {
                that.$router.go(-1)
              }, 1500);
            }else{
              Toast((res.data && res.data.mess)?res.data.mess:'接口错误');
            }
          }.bind(this),true);
        }

      },
    
      onBack() {
         if (window.history.length <= 1) {
             this.$router.push({path:'/'})
             return false
         } else {
             this.$router.go(-1)
         }
      },
    },

  }


</script>

<style scoped="scoped" src="../../css/comment.css">
 

</style>
